import { Button, message, Modal, Upload } from 'antd';
import React, { useState } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { baseURL } from 'utils/request';
import { getToken } from 'utils/storage';

/* 
    控制上传文件数量
*/

export default function Test() {
  // useState状态
  const [imgUrl, setImgUrl] = useState('');
  const [fileList, setFileList] = useState([]);

  const props = {
    // 显示默认支持的文件类型
    accept: '.jpg,.png,.jpeg',
    // 上传文件类型
    name: 'image',
    // 上传的服务器
    action: `${baseURL}/v1_0/upload`,
    headers: {
      authorization: `Bearer ${getToken()}`,
    },
    onChange(info) {
      setFileList(info.fileList);
      // if (info.file.status !== 'uploading') {
      //   console.log(info.file, info.fileList);
      // }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
    onPreview(file) {
      setImgUrl(file.thumbUrl);
    },
    // 上传文件之前的钩子
    beforeUpload(file) {
      const allowFileType = ['image/jpeg', 'image/jpg', 'image/png'];
      if (!allowFileType.includes(file.type)) {
        message.warning('不允许上传的文件类型');
        // 阻止上传，并且不显示在前端界面上
        return Upload.LIST_IGNORE;
        // 阻止上传，但是会显示在前端界面
        // return false;
      }
    },
  };
  return (
    <div>
      <Upload {...props} listType="picture-card" fileList={fileList}>
        {/* 判断fileList的长度 */}
        {fileList.length < 3 && <Button icon={<UploadOutlined />}></Button>}
      </Upload>
      <Modal
        footer={null}
        centered
        title="预览图片"
        // !!imgUrl  语法 相当于 Boolean(imgUrl)
        visible={!!imgUrl}
        onCancel={() => setImgUrl('')}
      >
        <img width={450} src={imgUrl} alt="" style={{ marginLeft: 10 }} />
      </Modal>
    </div>
  );
}
